import echarts from 'echarts'
import { getList } from 'service/cart'

import { appModule } from '@/store/module/app'

import Panel from './components/panel'
import { LoadScript } from '@/tools'
import './style.styl'

/**
 * @type {import('vue').default & import('vue').ComponentOptions}
 */
const Page = {
  name: 'cart',
  data() {
    return {
      goods: {
        list: [],
        total: 0
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    console.log(this.$store.hasModule('appModule'), appModule)

    new LoadScript('https://lib.baomitu.com/jquery/3.5.1/jquery.js').once('load', function(context) {
      console.warn(context)
    })

    new LoadScript('https://lib.baomitu.com/jquery/3.5.1/jquery.js').once('load', function(context) {
      console.log(context)
    })

    setTimeout(() => {
      new LoadScript('https://lib.baomitu.com/jquery/3.5.1/jquery.js').once('load', function(context) {
        console.log(context)
      })
    }, 3000)

    console.log(appModule.rol)

    chart.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    })
  },
  methods: {
    async getData() {
      const response = await getList()
      this.goods.list = response.list
      console.log(response)
    }
  },
  render() {
    return (
      <section class='chart-container'>
        <h2>page Cart</h2>
        <el-button type='primary'>666</el-button>
        <article class='chart-block'>
          {this.goods.list.map((item, i) => (
            <Panel
              time={item.time}
              onClick={e => {
                console.log(e)
              }}>
              <i>{item.time}</i>
              <b slot='storng'>{i}</b>
            </Panel>
          ))}
        </article>
        <div id='chart' ref='chart' style={{ height: '400px' }}></div>
      </section>
    )
  }
}

export default Page
